<template>
  <div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="对象KEY">
      <el-input v-model="formInline.key" placeholder="请输入对象KEY"></el-input>
    </el-form-item>
    <el-form-item label="对象名称">
      <el-input v-model="formInline.name" placeholder="请输入对象名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="primary" @click="preAddObject()">添加</el-button>
      <el-button type="success" @click="exportData" icon="el-icon-download">导出数据</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="50"></el-table-column>
    <el-table-column prop="key" label="对象KEY" width="200"></el-table-column>
    <el-table-column prop="name" label="对象名称" width="200"></el-table-column>
    <el-table-column prop="type" label="对象类型" width="100"></el-table-column>
    <el-table-column prop="size" label="对象大小" width="100"></el-table-column>
    <el-table-column prop="url" label="图片" width="120">
      <template slot-scope="scope">
        <img :src="scope.row.url" min-width="70" height="70" />
      </template>
    </el-table-column>
    <el-table-column prop="url" label="图片链接" width="200"></el-table-column>
    <el-table-column fixed="right" label="操作" width="300">
      <template slot-scope="scope">
        <el-button type="text" @click="preUpdateObject(scope.row)" size="small">编辑</el-button>
        <el-button type="text" @click="delStor(scope.row)" size="small">删除</el-button>
      </template>
    </el-table-column>
    
  </el-table>
  <!-- 分页 -->
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="formInline.pageNum"
    :page-size="formInline.pageSize"
    :page-sizes="[1, 2, 3, 4]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
<!-- 添加修改的模态框 -->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <!-- <input type="hidden" v-model="form.id"/> -->
    <el-form-item label="对象KEY" :label-width="formLabelWidth">
      <el-input v-model="form.key" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="对象名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="对象类型" :label-width="formLabelWidth">
      <el-select v-model="form.type" placeholder="选择类型">
        <el-option label="image/jpeg" value="image/ipeg"></el-option>
        <el-option label="image/png" value="image/png"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="对象大小" :label-width="formLabelWidth">
      <el-input v-model="form.size" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="图片" :label-width="formLabelWidth">
      <el-upload
        class="avatar-uploader"
        ref="upload"
        action=""
        :auto-upload="false"
        :limit="1"
        multiple
        :on-remove="handleRemove"
        accept="application/jpg"
        :file-list="fileList"
        list-type="picture"
        :on-change="handlerChange"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addAndupdObject()">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData: [],
      formInline:{pageNum:1,pageSize:2},
      total:0,
      dialogFormVisible:false,
      form: {
        id:'',
        key:'',
        name:'',
        type:'',
        size:'',
      },
      formLabelWidth: '120px',
      title:'',
      method:'',
      requestUrl:'',
      fileList:[],
      imageUrl:'',
      imageUrls:[],
    }
  },
  mounted(){
    this.getStorage();
  },
  methods:{
    //导出数据
    exportData() {
        var url ="http://localhost:9999/system/ecStorage/downLoadGoodsExcel?pageNum={pageNum}&pageSize={pageSize}&access_token={token}";
        url = url.replace("{pageNum}", this.formInline.pageNum);
        url = url.replace("{pageSize}", this.formInline.pageSize);
        url = url.replace("{token}", localStorage.getItem("access_token"));
        if (this.formInline.key) {
          url = url + "&key=" + this.formInline.key;
        }
          if (this.formInline.name) {
          url = url + "&name=" + this.formInline.name;
        }
        console.log("url:----------------------", url);
        window.open(url, "_parent");
    },
     //上传头像的
    handlerChange(file,files){
      console.log(file,files);
      this.fileList = files;
    },
    handleRemove(file, fileList) {
      console.log("删除之前:{}", this.imageUrls);
      console.log(file, fileList);
      for (var i = 0; i < this.imageUrls.length; i++) {
        if (this.imageUrls[i] == file.url) {
          this.imageUrls.splice(i, 1);
        }
      }
      console.log("删除之后:{}",this.imageUrls);
    },
    handleSizeChange(val) {
      this.formInline.pageSize=val;
      this.getStorage();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formInline.pageNum=val;
      this.getStorage();
      console.log(`当前页: ${val}`);
    },
    getStorage(){
      var $this = this;
      this.formInline["access_token"] = localStorage.getItem("access_token")
      this.axios({
        method:'get',
        url: "http://localhost:9999/system/ecStorage/storList",
        params:this.formInline
      }).then(function(res){
        console.log("查询列表返回的数据为:{}",res);
        $this.tableData=res.data.obj.list;
        $this.total=res.data.obj.total;
      });
    },
    onSubmit(){
      this.getStorage();
    },
    preAddObject(){
      for(var i in this.form){
        this.form[i]=null;
      }
      this.form.id=0;
      this.dialogFormVisible=true;
      this.title="添加页面";
      this.method="post";
      this.requestUrl="http://localhost:9999/system/ecStorage/addStor";
    },
    preUpdateObject(row){
      this.fileList = [];
      this.imageUrls = [];
      this.dialogFormVisible=true;
      for(var i in this.form){
        this.form[i]=row[i];
      }
      this.title="修改页面";
      this.method="put";
      this.requestUrl="http://localhost:9999/system/ecStorage/updStor";
       var $this=this;
      if(row.url!=null){
          this.urls = row.url.split(',');
          console.log("++++==",this.urls);
          //遍历数组存入fileList中
          var url=row.url;
          this.urls.forEach(function(url){
          console.log("************",url);
          $this.fileList.push({ name:url, url:url});
          $this.imageUrls.push(url);
        })
      }
    },
    addAndupdObject(){
      var formData = new FormData();
      //formData.append("access_token",localStorage.getItem("access_token"));
      //将原来this.form值赋到formData中
      for(var i in this.form){
        formData.append(i,this.form[i])
      };
      this.imageUrls.forEach(function(image){
        formData.append("images", image);
      });
      this.fileList.forEach(function(file) {
          if (file.raw) {
          formData.append("files", file.raw, file.name);
        }
      });
      //设置图片上传的格式
      let config = {
        "Content-Type": "multipart/form-data"
      };
      //key value 打印输出
      console.log("formData----------------->", formData);
      for (var key of formData.keys()) {
        console.log("key:{},value:{}", key, formData.get(key));
      };
      var $this = this;
      this.axios({
        method:this.method,
        url: this.requestUrl,
        data:formData,
          //access_token: localStorage.getItem("access_token"),
        config:config
      }).then(function(res){
        if(res.data.code==200){
          $this.$message(res.data.msg);
          $this.dialogFormVisible=false;
          $this.getStorage();
        }
      })
    },
    delStor(row){
      var $this = this;
      this.axios({
        method:"delete",
        url: "http://localhost:9999/system/ecStorage/delStor",
        data:row
      }).then(function(res){
        if(res.data.code==200){
          $this.$message(res.data.msg);
          $this.dialogFormVisible=false;
          $this.getStorage();
        }
      })
    }
  }
}
</script>


